<template>
  <div>
    <div  class="ControlPanel">
      <div class="bottom">
        <img src="../../../../public/img/list-3.png">
        <img src="../../../../public/img/list-4.png">
        <img src="../../../../public/img/list-2.png">
      </div>
      <!--    <van-slider class="slider"  bar-height="2px" button-size="20px" active-color="#ee0a24" />-->
      <div class="bottom">
        <img src="../../../../public/img/循环.png">
        <img src="../../../../public/img/pre_l.png">
        <img v-show="isshow" src="../../../../public/img/pause.png" class="begin" @click="begin">
        <img v-show="!isshow" src="../../../../public/img/play.png" class="begin" @click="paush">
        <img src="../../../../public/img/pre_r.png">
        <img src="../../../../public/img/列表.png">
      </div>
    </div>

  </div>
</template>

<script>
export default {
  name: "ControlPanel",
  props: {
    isshow: Boolean
  },
  created() {
    // console.log(this.isshow)
  },
  methods: {
    begin() {
      console.log(1)
      console.log(this.isshow)
      this.$emit("changeBegin", false)

      // this.isshow = false
    },
    paush() {
      console.log(1)
      this.$emit("changeBegin", true)
      // this.isshow = true
    },
  }
}
</script>

<style scoped lang="less">
.bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: center;
  margin: 30px auto;
  z-index: 1;

  img {
    width: 30px;
    height: 30px;
    z-index: 1;
  }

  .begin {
    width: 60px;
    height: 60px;
    z-index: 1;
  }
}
.slider{
  width: 90%;
  margin: auto;
}

</style>